<template>
  <div id="mail" ref="mail">
    <!-- 移动端搜索栏 -->
    <div class="mTopDiv" v-if="isShowMailTabs">
      <div class="left_logo">
        <img src="@/assets/images/mobile_black/home/logo.png" @click="gotoHome" />
      </div>
      <div class="center_search" @click="gotoSearch">
        <!-- 放大镜 -->
        <img src="@/assets/images/mobile_black/home/search.png" />

        <!-- 中间搜索框 -->
        <div class="search_box" :class="{ hasAppSearch: isApp !== true }">搜索数字产品</div>
      </div>

      <div class="right_notice" :class="{ hasAppNotice: isApp !== true }" @click="gotoNotice"
        v-if="isLogin && noticeNum > 0">
        <el-badge is-dot class="noticeDot">公告</el-badge>
      </div>
      <div v-else class="right_notice" :class="{ hasAppNotice: isApp !== true }" @click="gotoNotice">公告</div>
      <div class="right_app" @click="gotoApp" v-if="isApp !== true">APP</div>
    </div>
    <div class="phoneTopBg" :class="{
      needTopBg: $route.name == 'AlbumItem' || $route.name == 'ProductItem',
    }"></div>
    <!-- 中间大区域 -->
    <div class="selectShowDiv">
      <!-- 左侧tab栏 -->
      <!-- <div class="tabDiv" v-if="isShowMailTabs"><MailTabs /></div> -->
      <!-- 右侧商品展示 -->
      <div class="showProductsDiv">
        <!-- 商品展示 -->
        <div class="productsView">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MailTabs from "./components/MailTabs.vue";
import { isWeixin, isIOS, isPhone } from "@/utils";
import { mapState, mapMutations } from "vuex";

export default {
  name: "Mail",
  components: { MailTabs },
  data() {
    return {
      isShowMailTabs: false,
      isLogin: false,
      noticeNum: 0,
      isApp: JSON.parse(localStorage.getItem('isApp')),
    };
  },
  watch: {
    $route: "getTab",
  },
  computed: {
    ...mapState(["equipment", "userInfo"]),
  },
  methods: {
    ...mapMutations(["getEquipment"]),
    getTab() {
      let path = this.$route.name;
      if (path == "ProductItem" || path == "AlbumItem") {
        this.isShowMailTabs = true;
      } else {
        this.isShowMailTabs = false;
      }
    },
    // 跳转到搜索界面
    gotoSearch() {
      this.$router.push("/search");
    },
    // 跳转到主页
    gotoHome() {
      this.$router.push("/");
    },
    // 跳转到公告界面
    gotoNotice() {
      this.$router.push("/noticeList");
    },
    //跳转APP下载
    gotoApp() {
      this.$router.push("/appDownload");
    },
  },
  mounted() {
    this.getTab();
    let equipment = {};
    equipment.isWeixin = isWeixin();
    equipment.isIOS = isIOS();
    equipment.isPhone = isPhone();
    this.getEquipment(equipment);
    let that = this;
    window.onresize = function () {
      equipment.isWeixin = isWeixin();
      equipment.isIOS = isIOS();
      equipment.isPhone = isPhone();
      that.getEquipment(equipment);
    };

    let isLogin = JSON.parse(localStorage.getItem("isLogin"));
    if (isLogin) {
      this.isLogin = true;

      // 如果没有，就给一个0
      let noticeNum = localStorage.getItem("noticeNum");
      if (!noticeNum) {
        localStorage.setItem("noticeNum", JSON.stringify(0));
      } else {
        // 如果有，则算一下新的数量与上一次数量的差
        this.noticeNum = this.userInfo.notice_num - parseInt(noticeNum);
      }
    } else {
      this.isLogin = false;
    }
  },
  beforeDestroy() { },
};
</script>

<style lang="less" scoped>
#mail {
  // background: #171818;
  position: relative;
  width: 100%;
  padding-top: 30px;
  min-height: 100%;
  padding-bottom: 122px;

  .mTopDiv {
    display: none;
  }

  .phoneTopBg {
    display: none;
  }

  // 中间商品分类大区域div
  .selectShowDiv {
    display: flex;
    width: 100%;

    // 左侧tab栏
    .tabDiv {
      width: 239px;
    }

    // 右侧商品展示区域
    .showProductsDiv {
      width: 1200px;
      margin: 0 auto;
      // padding: 31px 0 0px 0;
      padding: 0;
    }
  }
}

@media screen and (max-width: 768px) {
  #mail {
    // background: #1e2020;
    padding-top: 0px;
    padding-bottom: 0px;

    .mTopDiv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 117px;
      // margin-top: 90px;

      .left_logo {
        margin-left: 30px;

        img {
          width: 112px;
          height: 72px;
        }
      }

      .center_search {
        position: relative;
        display: flex;
        align-items: center;
        transform: translateY(2px);

        img {
          position: absolute;
          left: 25px;
          z-index: 999;
          width: 28px;
          height: 28px;
        }

        .search_box {
          display: flex;
          align-items: center;
          box-sizing: border-box;
          height: 64px;
          width: 50.6667vw;
          border-radius: 32px;
          background: rgba(255, 255, 255, 0.1);
          -webkit-backdrop-filter: blur(12px) !important;
          backdrop-filter: blur(12px) !important;
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.5);
          line-height: 28px;
          padding-left: 70px;
        }

        .hasAppSearch {
          width: 350px;
        }
      }

      .right_notice {
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 28px;
        margin-right: 30px;
      }

      .hasAppNotice {
        margin-right: 0px;
      }

      /deep/.noticeDot {
        .el-badge__content.is-fixed.is-dot {
          width: 14px;
          height: 14px;
          border: none;
          background-color: #f34c44;
        }
      }

      .right_app {
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 28px;
        margin-right: 30px;
      }
    }

    .phoneTopBg {
      display: block;
      width: 100%;
      height: 488px;
      margin-top: -117px;
    }

    .needTopBg {
      background: url("../../assets/images/mobile/topBg.png");
      background-size: 100% 100%;
    }

    .selectShowDiv {
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      margin-top: -371px;

      .tabDiv {
        display: none;
      }

      .showProductsDiv {
        width: 100%;
        margin: 0;
        // margin-bottom: 102px;
        padding: 0;
      }
    }
  }
}
</style>
